<template>
  <el-drawer
    title="实时指标API"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer actual-api-drawer"
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-tabs v-model="activeTab" type="border-card" @tab-click="changeTab">
          <el-tab-pane label="API详情" name="whole">
            <actual-detail :drawerType="drawerType" ref="personalModule" @confirm="confirm"></actual-detail>
          </el-tab-pane>
          <el-tab-pane label="API测试" name="test">
            <actual-test ref="test"></actual-test>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button size="medium" @click="beforeClose">关闭</el-button>
      <el-button type="primary" size="medium" @click="submit" v-if="activeTab === 'whole'">提交</el-button>
    </div>
  </el-drawer>
</template>

<script>
import actualDetail from './actual-api-detail'
import actualTest from './actual-api-test'
export default {
  components: {
    actualDetail,
    actualTest
  },
  data() {
    return {
      drawerVisible: false,
      drawerType: 'view',
      activeTab: 'whole',
      apiId: ''
    }
  },
  methods: {
    showDrawer(param) {
      this.apiId = param.apiId
      this.drawerType = param.action
      if (param.tab) this.activeTab = param.tab
      this.drawerVisible = true
      this.$nextTick(() => {
        this.$refs.personalModule.init(this.apiId)
        if (this.activeTab === 'test') this.$refs.test.getDetail(this.apiId)
      })
    },
    changeTab(tab) {
      if (tab.name === 'test') this.$refs[tab.name].getDetail(this.apiId)
      else {
        this.$nextTick(() => this.$refs.personalModule.initText())
      }
    },
    confirm() {
      this.activeTab = 'test'
      this.$nextTick(() => {
        this.$refs[this.activeTab].getDetail(this.apiId)
      })
    },
    submit() {
      this.$refs.personalModule.submit()
    },
    beforeClose() {
      this.$refs.personalModule.clearForm()
      this.$refs.test.clearForm()
      this.apiId = ''
      this.activeTab = 'whole'
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss">
$pac-border-color: #e4e7ed;
.tag-drawer.actual-api-drawer {
  .el-drawer__body {
    .drawer-wrap {
      top: 50px;
      overflow: visible;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .drawer-content {
      overflow-y: visible;
    }
  }
  .el-tabs {
    position: absolute;
    top: -50px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
  }
  .el-tabs--border-card {
    box-shadow: none;
    border: none;
  }
  .el-tabs__header {
    background-color: transparent;
    border-bottom: none;
  }
  .el-tabs__nav {
    padding: 1px 1px 0 1px;
  }
  .el-tabs__item {
    font-weight: bold;
    background-color: #e4efff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #a3b6ee;
    border: 1px solid $pac-border-color;
    &.is-active {
      border-bottom: none;
      border-left-color: $pac-border-color;
      border-right-color: $pac-border-color;
    }
  }
  .el-tabs__content {
    height: calc(100% - 40px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      overflow: auto;
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(144, 147, 153, 0.5);
    }
  }
}
</style>
